<template>
	<view class="main">
		<uni-nav-bar leftIcon="arrowleft" @clickLeft="back" rightText="搜索" @clickRight="sousuo">
			<uni-search-bar  
			class="search" 
			:radius="0" 
			cancelText="" 
			placeholder="请输入书名" 
			@input="search"
			ref="seachBar"
			></uni-search-bar>
		</uni-nav-bar>
		     <view class="history-hot">
			    <view class="history">
			        <view class="search-history-header">
			        	<view>搜索历史</view>
			        	<view>
			        		<uni-icons type="trash" size="25"></uni-icons>清空
			        	</view>
			        </view>
			    	<uni-list>
			    	    <uni-list-item thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png" :title="item" :showArrow="false" v-for="(item,i) in history" :key="i">
			    	    </uni-list-item>
			    	</uni-list>
			    </view>
			    <view class="search-hot">
			        <view class="hot-header">
			        	<view>大家都在搜</view>
			        	<view>
			        		<uni-icons type="refresh" size="25"></uni-icons>换一批
			        	</view>
			        </view>
			    	<span v-for="(item,i) in hot" :key="i" class="hot">{{item}}</span>
			    </view>
			</view>
			
			<view class="search-list">
				<uni-list>
				    <uni-list>
				        <uni-list-item :title="item.name" :showArrow="false" v-for="(item,i) in searchData" :key="i" @click="searchByName(item.name)">
				        </uni-list-item>
				    </uni-list>
				</uni-list>
			</view>
		
		
	</view>
</template>

<script>
	import data from '@/Json.js'
	export default {
		data() {
			return {
				history: [],
				hot: ['知否','时间简史','绿巨人','变形金刚','千山暮雪','传说中的陈芊芊','清平乐','悲惨世界','楚乔传','夏有乔木，雅望天堂'],
				searchData: [],
				title:''
			}
		},
		created() {
			let history = JSON.parse(window.localStorage.getItem('searchHistory'))
			this.history = history
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			search(e) {
				const book = data.book
				const bookName = book.filter(v=> {
					const name = v.name
					return name.includes(e.value)
				})
				this.searchData = bookName
				console.log(this.searchData)
				var searchList = document.querySelector('.search-list')
				var historyHot = document.querySelector('.history-hot')
				// console.log(searchList)
				// console.log(historyHot)
				historyHot.style.display = 'none'
			},
		    searchByName (title) {
				const input = document.querySelector('.search uni-input .uni-input-input')
				input.value = title
				// this.$refs.seachBar.placeholder = title
				
			},
			sousuo() {
				const keyWords = document.querySelector('.search uni-input .uni-input-input').value
				console.log(keyWords)
				uni.navigateTo({
					url:'/pages/bookshop/detail/detail?keywords='+keyWords
				})
			}
		}
	}
</script>

<style>
	.search {
	  width: 500rpx;
	  float: left;
	}
	.search-history-header {
	  display: flex;
	  justify-content: space-between;
	  margin: 15px;
	}
	.hot-header {
	  display: flex;
	  justify-content: space-between;
	  margin: 15px;
	}
	.hot {
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 8px;
		background-color: #ccc;
		margin: 10px;
	}
	.show{
		display: block;
	}
	.hidden {
		display: none;
	}
</style>
